{% extends 'base.html' %}

{% block title %}添加商品{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>添加新商品</h1>

    <form method="post" enctype="multipart/form-data" class="mt-4">
        {% csrf_token %}

        <div class="mb-3">
            <label for="{{ goods_form.name.id_for_label }}" class="form-label">商品名称</label>
            {% if goods_form.name.errors %}
            <div class="text-danger">{{ goods_form.name.errors }}</div>
            {% endif %}
            <input type="text"
                   name="{{ goods_form.name.html_name }}"
                   id="{{ goods_form.name.id_for_label }}"
                   value="{{ goods_form.name.value|default:'' }}"
                   class="form-control">
        </div>

        <div class="mb-3">
            <label for="{{ goods_form.cover_image.id_for_label }}" class="form-label">封面图片</label>
            {% if goods_form.cover_image.errors %}
            <div class="text-danger">{{ goods_form.cover_image.errors }}</div>
            {% endif %}
            <input type="file"
                   name="{{ goods_form.cover_image.html_name }}"
                   id="{{ goods_form.cover_image.id_for_label }}"
                   class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">详情图片</label>
            <input type="file" name="detail_images" multiple class="form-control" accept="image/*">
        </div>

        <div class="mb-3">
            <label for="{{ goods_form.price.id_for_label }}" class="form-label">商品价格</label>
            {% if goods_form.price.errors %}
            <div class="text-danger">{{ goods_form.price.errors }}</div>
            {% endif %}
            <input type="number"
                   step="0.01"
                   min="0"
                   name="{{ goods_form.price.html_name }}"
                   id="{{ goods_form.price.id_for_label }}"
                   value="{{ goods_form.price.value|default:'' }}"
                   class="form-control">
        </div>

        <div class="mb-3">
            <label for="{{ goods_form.stock.id_for_label }}" class="form-label">商品数量</label>
            {% if goods_form.stock.errors %}
            <div class="text-danger">{{ goods_form.stock.errors }}</div>
            {% endif %}
            <input type="number"
                   min="0"
                   name="{{ goods_form.stock.html_name }}"
                   id="{{ goods_form.stock.id_for_label }}"
                   value="{{ goods_form.stock.value|default:0 }}"
                   class="form-control">
        </div>

        <div class="mb-3">
            <label for="{{ goods_form.categories.id_for_label }}" class="form-label">所属类别</label>
            {% if goods_form.categories.errors %}
            <div class="text-danger">{{ goods_form.categories.errors }}</div>
            {% endif %}
            <select name="{{ goods_form.categories.html_name }}"
                    id="{{ goods_form.categories.id_for_label }}"
                    class="form-select"
                    multiple>
                {% for category in categories %}
                <option value="{{ category.id }}">{{ category.name }}</option>
                {% endfor %}
            </select>
            <small class="form-text text-muted">按住Ctrl键可选择多个类别</small>
        </div>

        <div class="mb-3">
            <label for="{{ goods_form.description.id_for_label }}" class="form-label">商品描述</label>
            {% if goods_form.description.errors %}
            <div class="text-danger">{{ goods_form.description.errors }}</div>
            {% endif %}
            <textarea name="{{ goods_form.description.html_name }}"
                      id="{{ goods_form.description.id_for_label }}"
                      rows="5"
                      class="form-control">{{ goods_form.description.value|default:'' }}</textarea>
        </div>

        <button type="submit" class="btn btn-primary">保存商品</button>
        <a href="{% url 'goods:list' %}" class="btn btn-secondary">取消</a>
    </form>
</div>
{% endblock %}